<template>
  <div>
    <div class="pagination-wrap">
      <span class="pagination-content">
        <el-pagination
          v-if="fullContent != null"
          background
          layout="prev, pager, next"
          :page-count="pageLength"
          @current-change="setPage"
          :small="viewSize.width <= viewSize.threshold"
        >
        </el-pagination>
      </span>
    </div>
    <el-table
      :data="content"
      style="width: 100%"
    >
      <el-table-column
        type="expand"
        v-if="viewSize.width <= viewSize.threshold"
      >
        <template slot-scope="props">
          <el-form
            label-position="left"
            inline
          >
            <el-form-item label="项目：">
              <span>{{ props.row.items }}</span>
            </el-form-item>
            <el-form-item label="备注：">
              <span>{{ props.row.remark }}</span>
            </el-form-item>
            <el-form-item label="时间：">
              <span>{{ FUNC.getShortTimeString(props.row.time) }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="operator"
        label="操作人"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="member"
        label="姓名"
        width="80"
      ></el-table-column>
      <!-- <el-table-column prop="number" label="ID" width="80"></el-table-column> -->
      <el-table-column
        prop="action"
        label="操作"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="items"
        label="项目"
        v-if="viewSize.width > viewSize.threshold"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="120"
        v-if="viewSize.width > viewSize.threshold"
      ></el-table-column>
      <el-table-column
        label="时间"
        width="100"
        v-if="viewSize.width > viewSize.threshold"
      >
        <template slot-scope="scope">
          {{ FUNC.getShortTimeString(scope.row.time) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "historyView",
    data() {
      return {
        page: 1,
      };
    },
    computed: {
      content() {
        if (!this.fullContent) return [];
        return this.fullContent[this.page - 1];
      },
      pageLength() {
        return this.fullContent.length;
      },
      fullContent() {
        return this.$store.state.operateLog;
      },
      viewSize() {
        return this.$store.state.viewSize;
      },
    },
    methods: {
      setPage(page) {
        this.page = page;
      },
      // loadContent() {
      //   this.$store.dispatch("getOperateLog");
      // },
    },
    mounted() {
      this.$store.dispatch("getOperateLog");
      // if (!this.content) {
      //   this.loadContent();
      // }
    },
  };
</script>

<style scoped>
  .pagination-wrap {
    position: fixed;
    z-index: 99;
    top: 70px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
  }

  .pagination-content {
    padding: 6px 12px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    opacity: 0.5;
    transition: all 0.5s;
  }

  .pagination-content:hover {
    opacity: 1;
  }
</style>